<template>
  <div>
    <an-carousel class="mb-2 hidden-xs"></an-carousel>

    <b-list-group class="mb-2">
      <b-list-group-item
        v-for="item in listData"
        :key="item.article_id"
        :href="'/view/contPage/?id=' + item.article_id"
      >
        {{ item.title }}
      </b-list-group-item>
    </b-list-group>

    <b-card
      title="扫一扫"
      :img-src="'data:image/png;base64,' + imgSrc"
      img-alt="Image"
      img-top
      tag="article"
      style="max-width: 20rem;"
      class="mb-2 hidden-xs"
    >
      <b-card-text>
        转移到手机上阅读
      </b-card-text>

      <!-- <b-button href="#" variant="primary">Go somewhere</b-button> -->
    </b-card>
  </div>
</template>

<script>
import anCarousel from "@/components/anCarousel";
import { creatQrCode } from "@/assets/services/api";
export default {
  name: "AnRight",
  components: {
    anCarousel
  },
  data() {
    return {
      listData: [],
      imgSrc: "" // 二维码图片
    };
  },
  mounted() {
    this.anLoad();
    this.creatQrCode();
  },
  methods: {
    anLoad() {
      this.$store.dispatch("getRightList").then(res => {
        this.listData = res;
      });
    },
    creatQrCode() {
      let rout = this.$route.fullPath;
      rout = rout.substring(1, rout.Length); // 删除第一个字符 ‘/’
      const url = process.env.BASE_URL + rout;
      const nd = {
        data: url,
        level: "L",
        size: 4,
        output: false
      };
      creatQrCode(nd).then(res => {
        this.imgSrc = res;
      });
    }
  }
};
</script>

<style scoped></style>
